<script setup lang="ts">
import { isEmpty } from 'lodash'
import { computed } from 'vue'

const props = defineProps(['col', 'row'])

const classComputed = computed(() => {
  const { row, col } = props
  if (isEmpty(row) || isEmpty(col) || isEmpty(col?.options)) return ''
  const options = col.options
  const value = row && row[col.key]
  if (isEmpty(value)) return ''

  return options.find((d: any) => d.value == value).point
})
const valueComputed = computed(() => {
  const { row, col } = props
  if (isEmpty(row) || isEmpty(col) || isEmpty(col?.options)) return ''
  const options = col.options
  const value = row[col.key]
  if (isEmpty(value)) return ''

  return options.find((d: any) => d.value == value).label
})
</script>

<template>
  <div class="table-ponit">
    <div class="point-item" :class="classComputed"></div>
    <span>{{ valueComputed }}</span>
  </div>
</template>

<style lang="scss" scoped>
.table-ponit {
  display: flex;
  align-items: center;
  .point-item {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.success {
  background-color: #67c23a;
}
.loading {
  background-color: #e6a23c;
}
.fail {
  background-color: #f56c6c;
}
.unset {
  background-color: #909399;
}
</style>
